$(function () {

});
//初始化表格
var creatjqg;
function creatjqGrid() {
    creatjqg= $("#jqGrid").jqGrid({
        url: baseURL + 'sys/btnavbar/list',
        datatype: "json",
        colModel: [
            { label: '轮播图', name: 'img', index: 'img', width: 80 },
            { label: '店铺名称', name: 'name', index: 'name', width: 80 }
        ],
        viewrecords: true,
        height: 385,
        rowNum: 10,
        rowList : [10,30,50],
        rownumbers: true,
        rownumWidth: 25,
        autowidth:true,
        multiselect: true,
        pager: "#jqGridPager",
        jsonReader : {
            root: "page.list",
            page: "page.currPage",
            total: "page.totalPage",
            records: "page.totalCount"
        },
        prmNames : {
            page:"page",
            rows:"limit",
            order: "order"
        },
        postData :{ pid:vm.clickTreeNode.id},
        gridComplete:function(){
            //隐藏grid底部滚动条
            $("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
        }
    });
}

//ztree基本配置
var Category_ztree;
var CategoryZtree_setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: -1
        },
        key: {
            url: "nourl"
        }
    },
    check: {
        enable: false,
        nocheckInherit: true
    },
    callback: {
        onClick: zTreeOnClick
    }
};
var setting = {
    data: {
        simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pid",
            rootPId: -1
        },
        key: {
            url:"nourl"
        }
    }
};
var ztree;
function zTreeOnClick(event, treeId, treeNode, clickFlag) {
    vm.clickZtreeNode(treeNode);
}
var vm = new Vue({
	el:'#rrapp',
	data:{
		showList: true,
		title: null,
        clickTreeNode:{},
		btNavBar: {},
        categdata:{},
        q:{
            name:""
        }
	},
	methods: {
		query: function () {
			vm.reload();
		},
        //列表操作 b
		add: function(){
			vm.showList = false;
			vm.title = "新增";
			vm.btNavBar = {img:""};
            vm.imgarr=[];
            $.get(baseURL + "sys/btnavbar/getcustomersztree", function(r){
                ztree = $.fn.zTree.init($("#deptTree"), setting, r.categroyztree);
                vm.deptTree();
            })
		},
		update: function (event) {
			var id = getSelectedRow();
			if(id == null){
				return ;
			}
			vm.showList = false;
            vm.title = "修改";
            
            vm.getInfo(id)
		},
		saveOrUpdate: function () {
			var url = vm.btNavBar.id == null ? "sys/btnavbar/save" : "sys/btnavbar/update";
			$.ajax({
				type: "POST",
			    url: baseURL + url,
                contentType: "application/json",
			    data: JSON.stringify(vm.btNavBar),
			    success: function(r){
			    	if(r.code === 0){
						alert('操作成功', function(index){
							vm.reload();
						});
					}else{
						alert(r.msg);
					}
				}
			});
		},
		del: function (event) {
			var ids = getSelectedRows();
			if(ids == null){
				return ;
			}
			
			confirm('确定要删除选中的记录？', function(){
				$.ajax({
					type: "POST",
				    url: baseURL + "sys/btnavbar/delete",
                    contentType: "application/json",
				    data: JSON.stringify(ids),
				    success: function(r){
						if(r.code == 0){
							alert('操作成功', function(index){
								$("#jqGrid").trigger("reloadGrid");
							});
						}else{
							alert(r.msg);
						}
					}
				});
			});
		},
		getInfo: function(id){
			$.get(baseURL + "sys/btnavbar/info/"+id, function(r){
                vm.btNavBar = r.btNavBar;
            });
		},
		reload: function (event) {
			vm.showList = true;
			var page = $("#jqGrid").jqGrid('getGridParam','page');
			$("#jqGrid").jqGrid('setGridParam',{
                postData:{'pid':vm.clickTreeNode.id},
                page:page
            }).trigger("reloadGrid");
		},
        //列表操作 e
		// ztree 操作
        addcategroy:function () {
            var str = "添加分类";
            var id="#categadd";
            vm.addormodprocate(str,id,1);
        },
        modcategroy:function () {
            var str = "修改分类";
            var id="#categgmod";
            vm.addormodprocate(str,id,2);
        },
        delcategroy:function () {
            if(vm.clickTreeNode.children!= null && vm.clickTreeNode.children.length>0){
                alert('包含子分类不能删除', function (index3) {});
                return;
            }
            $.get(baseURL + "sys/btnavbar/iscandelete/" + vm.clickTreeNode.id, function (r) {
                if (r.code == 0) {
                    alert("该分类中有内容不能删除!!!", function (index3) {return;});
                }else{
                    confirm('确定要删除选中的记录？', function(){
                        $.get(baseURL + "sys/btnavbar/delcategroy/" +vm.clickTreeNode.id , function (r) {
                            if (r.code == 0) {
                                alert("删除成功！");
                                vm.getZTreeDateAndShow();
                            }else{
                                alert("删除失败！");
                            }
                        })
                    });
                }
            })
        },
        clickZtreeNode: function (treeNode) {
            $("#pcmod").show();
            $("#pcdel").show();
            $("#pcadd").show();
            vm.clickTreeNode = treeNode;
            if(vm.clickTreeNode .pid==-1){
                $("#pcdel").hide();
                $("#pcmod").hide();
            }else{
                $("#pcadd").hide();
            }
            vm.showRightDiv(treeNode)
        },
        showRightDiv:function (treeNode) {
            vm.title = treeNode.name;
            $("#showtable").hide();
            $("#unshowtable").hide();
            if(treeNode.pid!="-1"){
                $("#showtable").show();
                vm.productlist(treeNode.id);
            }else{
                $("#unshowtable").show();
            }
        },
        productlist:function () {
            if(creatjqg == null){
                creatjqGrid();
            }else{
                var page = $("#jqGrid").jqGrid('getGridParam','page');
                $("#jqGrid").jqGrid('setGridParam',{
                    postData:{'pid':vm.clickTreeNode.id},
                    page:page
                }).trigger("reloadGrid");
            }
        },
        addormodprocate:function(title,id,style){
            index3 = layer.open({
                type: 1,
                skin: 'layui-layer-molv',
                title:title ,
                area: ['560px', '350px'],
                shadeClose: false,
                content: jQuery(id)
                , btn: ['提交', '取消']
                , yes: function (index, layero) {
                    if(style==1){
                        vm.categdata.pid = vm.clickTreeNode.id;
                        vm.categdata.name =$("#newname").val();
                    }else if(style==2){
                        vm.categdata.pid = vm.clickTreeNode.pid;
                        vm.categdata.id = vm.clickTreeNode.id;
                        vm.categdata.name =$("#oldname").val();
                    }
                    if (vm.categdata.name != null && vm.categdata.name != "") {
                        //添加日志
                        $.ajax({
                            type: "POST",
                            url: baseURL + "sys/btnavbar/addormodcategroy",
                            contentType: "application/json",
                            data: JSON.stringify(vm.categdata),
                            success: function (r) {
                                if (r.code === 0) {
                                    layer.close(index3);
                                    alert('操作成功', function (index3) {
                                        vm.getZTreeDateAndShow();
                                    });
                                } else {
                                    alert(r.msg);
                                }
                            }
                        });
                    } else {
                        alert("日志不能为空!!!");
                    }
                }, btn2: function (index, layero) {
                    layer.close(index);
                    return false;
                }
                , cancel: function () {
                    //右上角关闭回调
                }
            });
        },
        getZTreeDateAndShow: function () {
            //加载菜单树
            $.get(baseURL + "sys/btnavbar/getcategoryztree", function (r) {
                if (r.code == 0) {
                    Category_ztree = $.fn.zTree.init($("#CategoryZtree"), CategoryZtree_setting, r.categroyztree);
                    //展开所有节点
                    Category_ztree.expandAll(true);
                    //调用默认展开第一个结点
                    var nodes = Category_ztree.getNodes();
                    var childNodes = Category_ztree.transformToArray(nodes[0]);
                    Category_ztree.checkNode(childNodes[0], true, true);
                    Category_ztree.selectNode(childNodes[0]); //选中第一个父节点下面第一个子节点
                    Category_ztree.setting.callback.onClick(null, Category_ztree.setting.treeId, childNodes[0]);//点击第一个父节点下面第一个子节点
                }
            });
        },
        deptTree: function(){
            layer.open({
                type: 1,
                offset: '50px',
                skin: 'layui-layer-molv',
                title: "选择部门",
                area: ['300px', '450px'],
                shade: 0,
                shadeClose: false,
                content: jQuery("#deptLayer"),
                btn: ['确定', '取消'],
                btn1: function (index) {
                    var node = ztree.getSelectedNodes();
                    vm.btNavBar.pid=vm.clickTreeNode.id;
                    vm.btNavBar.name=node[0].name;
                    vm.btNavBar.img=node[0].img;
                    vm.btNavBar.link="/api/dianpu/"+node[0].id;

                    //选择上级部门
                    vm.saveOrUpdate();

                    layer.close(index);
                }
            });
        }
        // ztree 操作e
	},
    mounted: function () {
        this.getZTreeDateAndShow();
    }
});